<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript 功能实现</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .container {
            margin-bottom: 30px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        h2 {
            color: #333;
            border-bottom: 1px solid #eee;
            padding-bottom: 10px;
        }
        input {
            padding: 8px;
            margin: 5px;
            width: 100px;
        }
        button {
            padding: 8px 15px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
        }
        button:hover {
            background-color: #45a049;
        }
        .result {
            margin: 10px 0;
            padding: 10px;
            background-color: #f9f9f9;
            border-radius: 4px;
        }
        #dynamicInputs {
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <!-- 功能1：比较两个数的大小 -->
    <div class="container">
        <h2>功能1：比较两个数的大小</h2>
        <p>输入两个数字，比较它们的大小：</p>
        <input type="text" id="num1" placeholder="输入第一个数">
        <input type="text" id="num2" placeholder="输入第二个数">
        <button onclick="compareNumbers()">比较大小</button>
        <div id="comparisonResult" class="result"></div>
    </div>

    <!-- 功能2：两个数的加减乘除 -->
    <div class="container">
        <h2>功能2：两个数的加减乘除</h2>
        <p>输入两个数字，进行基本运算：</p>
        <input type="text" id="calcNum1" placeholder="第一个数">
        <input type="text" id="calcNum2" placeholder="第二个数">
        <button onclick="calculate('add')">加</button>
        <button onclick="calculate('subtract')">减</button>
        <button onclick="calculate('multiply')">乘</button>
        <button onclick="calculate('divide')">除</button>
        <div id="calculationResult" class="result"></div>
    </div>

    <!-- 功能3：计算1到n的和 -->
    <div class="container">
        <h2>功能3：计算1到n的和</h2>
        <p>输入一个数字，计算从1加到该数的和：</p>
        <input type="text" id="sumInput" placeholder="输入一个数字">
        <button onclick="calculateSum()">计算和</button>
        <div id="sumResult" class="result"></div>
    </div>

    <!-- 功能4：动态添加文本框 -->
    <div class="container">
        <h2>功能4：动态添加文本框</h2>
        <p>点击按钮添加新的文本框：</p>
        <button onclick="addInputField()">添加文本框</button>
        <div id="dynamicInputs"></div>
    </div>

    <!-- 功能5：三个数排序 -->
    <div class="container">
        <h2>功能5：三个数排序</h2>
        <p>输入三个数字，进行排序：</p>
        <input type="text" id="sortNum1" placeholder="第一个数">
        <input type="text" id="sortNum2" placeholder="第二个数">
        <input type="text" id="sortNum3" placeholder="第三个数">
        <button onclick="sortNumbers()">排序</button>
        <div id="sortResult" class="result"></div>
    </div>

    <script>
        // 功能1：比较两个数的大小
        function compareNumbers() {
            // 获取输入框的值
            const num1 = document.getElementById('num1').value;
            const num2 = document.getElementById('num2').value;
            const resultElement = document.getElementById('comparisonResult');
            
            // 验证输入是否为有效数字
            if (isNaN(num1) || isNaN(num2)) {
                resultElement.textContent = "请输入有效的数字！";
                return;
            }
            
            // 转换为数字类型
            const number1 = parseFloat(num1);
            const number2 = parseFloat(num2);
            
            // 比较大小并显示结果
            if (number1 > number2) {
                resultElement.textContent = `${number1} 大于 ${number2}`;
            } else if (number1 < number2) {
                resultElement.textContent = `${number1} 小于 ${number2}`;
            } else {
                resultElement.textContent = `${number1} 等于 ${number2}`;
            }
        }

        // 功能2：两个数的加减乘除
        function calculate(operation) {
            // 获取输入框的值
            const num1 = document.getElementById('calcNum1').value;
            const num2 = document.getElementById('calcNum2').value;
            const resultElement = document.getElementById('calculationResult');
            
            // 验证输入是否为有效数字
            if (isNaN(num1) || isNaN(num2)) {
                resultElement.textContent = "请输入有效的数字！";
                return;
            }
            
            // 转换为数字类型
            const number1 = parseFloat(num1);
            const number2 = parseFloat(num2);
            let result;
            
            // 根据操作类型进行计算
            switch (operation) {
                case 'add':
                    result = number1 + number2;
                    resultElement.textContent = `${number1} + ${number2} = ${result}`;
                    break;
                case 'subtract':
                    result = number1 - number2;
                    resultElement.textContent = `${number1} - ${number2} = ${result}`;
                    break;
                case 'multiply':
                    result = number1 * number2;
                    resultElement.textContent = `${number1} × ${number2} = ${result}`;
                    break;
                case 'divide':
                    if (number2 === 0) {
                        resultElement.textContent = "除数不能为零！";
                    } else {
                        result = number1 / number2;
                        resultElement.textContent = `${number1} ÷ ${number2} = ${result}`;
                    }
                    break;
                default:
                    resultElement.textContent = "未知操作";
            }
        }

        // 功能3：计算1到n的和
        function calculateSum() {
            // 获取输入框的值
            const input = document.getElementById('sumInput').value;
            const resultElement = document.getElementById('sumResult');
            
            // 验证输入是否为有效正整数
            if (isNaN(input) || input === "" || input < 1 || !Number.isInteger(parseFloat(input))) {
                resultElement.textContent = "请输入一个正整数！";
                return;
            }
            
            const n = parseInt(input);
            let sum = 0;
            
            // 计算1到n的和
            for (let i = 1; i <= n; i++) {
                sum += i;
            }
            
            resultElement.textContent = `从1加到${n}的和是：${sum}`;
        }

        // 功能4：动态添加文本框
        function addInputField() {
            // 获取动态输入容器
            const container = document.getElementById('dynamicInputs');
            
            // 创建新的输入框
            const newInput = document.createElement('input');
            newInput.type = 'text';
            newInput.placeholder = '新文本框 ' + (container.children.length + 1);
            
            // 将新输入框添加到容器中
            container.appendChild(newInput);
            
            // 添加换行符保持整洁
            container.appendChild(document.createElement('br'));
        }

        // 功能5：三个数排序
        function sortNumbers() {
            // 获取三个输入框的值
            const num1 = document.getElementById('sortNum1').value;
            const num2 = document.getElementById('sortNum2').value;
            const num3 = document.getElementById('sortNum3').value;
            const resultElement = document.getElementById('sortResult');
            
            // 验证输入是否为有效数字
            if (isNaN(num1) || isNaN(num2) || isNaN(num3)) {
                resultElement.textContent = "请输入有效的数字！";
                return;
            }
            
            // 转换为数字类型
            const numbers = [
                parseFloat(num1),
                parseFloat(num2),
                parseFloat(num3)
            ];
            
            // 使用冒泡排序对三个数进行排序
            for (let i = 0; i < numbers.length - 1; i++) {
                for (let j = 0; j < numbers.length - 1 - i; j++) {
                    if (numbers[j] > numbers[j + 1]) {
                        // 交换位置
                        const temp = numbers[j];
                        numbers[j] = numbers[j + 1];
                        numbers[j + 1] = temp;
                    }
                }
            }
            
            // 显示排序结果
            resultElement.textContent = `排序结果：${numbers[0]}, ${numbers[1]}, ${numbers[2]}`;
        }
    </script>
</body>
</html>